<template>
  <div>
    <set-header :text="text" :title="title" :choose-color="chooseColor" :last-color="lastColor"></set-header>
      <div class="body">
        <div class="body-box">
          <!--details详情-->
          <div class="details box-message">
            <div class="box-title floatLeft">Contact details</div>
            <div class="details-message floatLeft">
              <span class="email block">Email</span>
              <div class="send">
                <span class="send-com block">bjsunhe@ina.com<span class="lineBlock">Unverfied</span></span>
                <span class="send-text block">In order to create a project you’ll need to verify your email. Send a verification email to yourself using the button below, then use the link in the email to verify your email address.</span>
                <button>Send verification email</button>
              </div>
            </div>
            <div class="clear"></div>
          </div>
          <!--recipient部分-->
          <div class="recipient box-message">
            <div class="box-title">Funds recipient</div>
          </div>
          <!--bank部分-->
          <div class="bank box-message">
            <div class="box-title">Bank account</div>
          </div>
          <!--payment部分-->
          <div class="payment box-message">
            <div class="box-title">Payment source</div>
          </div>
          <!--文本部分-->
          <div class="text">
            <span class="block text-title">Eligibility requirements</span>
            <span class="text-txt block">To be eligible to start a Kickstarter project as a creator in Australia,you need to meet the following requirements:</span>
            <ul>
              <li>You are 18 years of age or older.</li>
              <li>You are a permanent resident of Australia.</li>
              <li>You are creating a project in your own name, oron behalf of a registered legal entity with which you are addiliated.</li>
            </ul>
            <span class="block text-title">Questions about taxes?</span>
            <span class="text-txt">Check out <a>Kickstarter and Taxs</a></span>
          </div>
        </div>

      </div>
    <set-footer></set-footer>
  </div>
</template>

<script>
  import setHeader from '../public/SetHeader'
  import setFooter from '../public/SetFooter'

    export default {
        name: "account",
        components:{ setHeader, setFooter },
        data(){
            return{
                text:'Provide additional details about yourself and where funds should be sent.',
                title:'Confirm your identity and link a bank account.',
                chooseColor:[ false, false, false, false, true ],
                lastColor:[ '', '', '', '', '' ]
            }
        }
    }
</script>

<style scoped lang="scss">
  .clear{clear: left}
  .block{display: block}
  .lineBlock{display: inline-block}
  .floatLeft{float: left}
  .body{background-color: #DBDEDD;}
  .body-box{
    width: 904px;
    margin: 0 auto;
    padding:0 0 0 26px ;
    background-color: #ffffff;
    position: relative;
    border: 1px solid transparent;
    height: 2140px;
    .details{
      position: absolute;
      top: -7px;
    }
    .recipient,.bank,.payment{line-height:46px;}
    .recipient{margin-top: 233px;}
    .box-message{
      width: 640px;
      background: #F8F9FD;
      border-radius: 6px;
      .box-title{
        font-family: Arial-BoldMT;
        font-size: 12px;
        color: #2E2E2E;
        letter-spacing: 0.4px;
        margin: 15px 0 0 13px;
      }
      .details-message{
        margin: 3px 0 4px 79px;
        width: 449px;
        height: 211px;
        background: #FFFFFF;
        border: 1px solid #DBDEDD;
        border-radius: 4px;
        .email{
          font-family: ArialMT;
          font-size: 12px;
          color: #2E2E2E;
          letter-spacing: 0.4px;
          padding: 13px 0 11px 11px;
        }
        .send{
          width: 327px;
          height: 172px;
          margin:0px 0 0 121px;
          background: #FFFFFF;
          border: 1px solid #DBDEDD;
          border-radius: 4px;
          .send-com{
            line-height: 38px;
            border-bottom: 1px solid #DBDEDD;
            font-family: ArialMT;
            font-size: 12px;
            color: #2E2E2E;
            letter-spacing: 0.4px;
            padding-left: 12px;
            box-sizing: border-box;
            span{
              font-family: Arial-BoldMT;
              font-size: 12px;
              color: #2E2E2E;
              letter-spacing: 0.2px;
              margin-left:144px;
            }
          }
          .send-text{
            margin: 7px 0 12px 12px;
            font-family: ArialMT;
            font-size: 12px;
            color: #2E2E2E;
            letter-spacing: 0.2px;
            line-height: 16px;
          }
          button{
            width: 190px;
            height: 38px;
            outline: none;
            border: none;
            background: #2C59F6;
            font-family: Arial-BoldMT;
            font-size: 14px;
            color: #FFFFFF;
            margin-left: 12px;
          }
        }
      }
    }
    .text{
      width: 215px;
      padding:1236px 0 0 32px;
      font-size: 12px;
      color: #2E2E2E;
      .text-title{
        font-family: Arial-BoldMT;
        margin-bottom: 11px;
      }
      .text-txt{
        ont-family: ArialMT;
        letter-spacing: 0.4px;
        line-height: 17px;
        a{
          color: #2C59F6;
          margin-top: 13px;
        }
      }
      ul{
        height: 290px;
        margin: 10px 0 20px 0;
        li{
          margin-left: 20px;
          padding-left: 15px;
          font-family: ArialMT;
          font-size: 12px;
          color: #2E2E2E;
          letter-spacing: 0.4px;
          line-height: 17px;
        }
      }
    }
  }


</style>
